<script setup>
  import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
  import Search from '@/components/index/Search.vue'
  import Timer from '@/components/index/Timer.vue'
  import CustomSetting from '@/components/index/CustomSetting.vue'
  import Holle from '@/components/index/Holle.vue'
  import ChickenSoup from "@/components/index/ChickenSoup.vue"
  import Collection from '@/components/index/Collection.vue'
  import { useStore } from '@/store/index.js'
  import { useStyleStore } from "@/store/styleStore.js";
  import CollectItemOperation from "@/components/index/CollectItemOperation.vue";
  import Guide from "@/components/index/Guide.vue";
  import UserInfo from "@/components/index/UserInfo.vue";

  const store = useStore();
  const styleStore = useStyleStore();


  onMounted(() => {
    styleStore.comment.method.initAllStatus();
    // window.addEventListener('resize', handleResize);
  });
  onBeforeUnmount(() => {
    // window.removeEventListener('resize', handleResize);
  });

  /**
   * 首页右键时间
   * @param event
   */
  const rightClickBlur = (event) => {
    styleStore.comment.method.globalRightEvent();
    event.preventDefault();
  }

</script>
<template>
  <div :class="['index-basic', styleStore.content.trigger ? 'index-tagger':'index-not-tagger']">

    <div @click.stop="styleStore.comment.method.globalClick1Event()" @contextmenu.stop="rightClickBlur"
         :class="['index-inner-basic', styleStore.content.trigger ? 'index-inner-tagger':'index-inner-not-tagger']">

      <Holle @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop=""></Holle>
      <CustomSetting @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop=""></CustomSetting>
      <Timer @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)"></Timer>
      <Search @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop=""></Search>
      <Collection></Collection>
      <ChickenSoup @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)"  @click.stop=""></ChickenSoup>

      <!-- 用户中心弹出层 -->
      <!--<UserAlert @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop=""></UserAlert>-->
      <UserInfo/>

      <!-- 新增/编辑 收藏项弹出层 -->
      <CollectItemOperation @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop=""></CollectItemOperation>

      <!-- 使用指南组件 -->
      <Guide></Guide>

    </div>
  </div>
</template>
<style scoped>

  /* 外层背景图效果盒子基本样式 */
  .index-basic {
    width: 100vw;
    height: 100vh;
    background-image: url(http://120.46.171.159:9000/biscuit-tag-page/global-background-image/backageImage1.jpeg);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-size .3s;
  }


  /* 内部模糊效果盒子基本样式 */
  .index-inner-basic {
    width: 100%;
    height: 100%;
    transition: all .3s;
    position: relative;
  }


  /* 外层背景图效果盒子触发与不触发动态样式 */
  .index-tagger {
    background-size: 105%;
  }
  .index-not-tagger {
    background-size: 100%;
  }

  /* 内部模糊效果盒子触发与不触发动态样式 */
  .index-inner-tagger {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
  }
  .index-inner-not-tagger {
    backdrop-filter: blur(0);
  }
</style>